<template>
	<view id="login-reset" :data-theme="themeStyle">
		<header-back :headerTitle="$lang('reset.title')"></header-back>
		
		<view class="header-reg">
			<view class="reg-tab">
				<view :class="['tab',tabIndex == 1?'tab-act':'']" @click="setTab(1)">{{ $lang('reset.mobile') }}</view>
				<view :class="['tab',tabIndex == 2?'tab-act':'']" @click="setTab(2)">{{ $lang('reset.eMail') }}</view>
			</view>
		</view>
		
		<view class="content-reset">
			<view class="form-wrap">
				<view class="input-wrap" v-show="tabIndex == 1">
					<view class="content">
						<input type="text" v-model="formObj.mobile" @input="handleState()" :placeholder="$lang('reset.tip1')" placeholder-class="input-placeholder" class="input"  />
					</view>
				</view>
				<view class="input-wrap" v-show="tabIndex == 2">
					<view class="content">
						<input type="text" v-model="formObj.email" @input="handleState()" :placeholder="$lang('reset.tip2')" placeholder-class="input-placeholder" class="input"  />
					</view>
				</view>
				<view class="input-wrap" >
					<view class="content">
						<input type="password" v-model="formObj.password" @input="handleState()" :placeholder="$lang('reset.tip4')" maxlength="8" placeholder-class="input-placeholder" class="input"  />
					</view>
				</view>
				<view class="input-wrap">
					<view class="content">
						<input type="text" :placeholder="$lang('reset.tip3')" placeholder-class="input-placeholder" @input="handleState()" class="input" v-model="formObj.captcha_code" />
						<image :src="captcha.img" class="captcha" @click="getCaptcha"></image>
					</view>
				</view>
				
				<view :class="['reset-btn',disabled?'btn-dis':'']" @click="submitForm()">{{ $lang('reset.resetPassword') }}</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	import headerBack from '@/components/headerBack.vue'
  import globalConfig from '@/common/js/golbalConfig.js';
  export default {
  mixins:[globalConfig],

  data() {
		return {
			tabIndex: 1,
			formObj: {
				mobile: '',
				password: '',
				captcha_code: '',
				captcha_id: '',
			},
			captcha: {
				// 验证码
				id: '',
				img: ''
			},
			back: '',
			disabled: true,
		};
	},
	onLoad(option) {
		if (option.back) this.back = option.back;
		this.getCaptcha();
	},
	components: {
		headerBack,
	},
	onShow() {

	},
	methods: {
		// 处理显示状态
		handleState(){
			this.disabled = !Object.values(this.formObj).every( v => v);
		},
		/**
		 * 获取验证码
		 */
		getCaptcha() {
			this.$api.sendRequest({
				url: '/api/captcha/captcha',
				data: {
					captcha_id: this.captcha.id
				},
				success: res => {
					if (res.code >= 0) {
						this.captcha = res.data;
						this.captcha.img = this.captcha.img.replace(/\r\n/g, '');
						this.formObj.captcha_id = res.data.id;
					}
				}
			});
		},
		// 切换tab
		setTab(type){
			this.tabIndex = type;
			if(type == 1){
				this.formObj = {
					mobile: '',
					password: '',
					captcha_code: '',
					captcha_id: '',
				}
			}else {
				this.formObj = {
					email: '',
					password: '',
					captcha_code: '',
					captcha_id: '',
				}
			}
			this.getCaptcha();
			this.handleState()
		},
		// 提交
		submitForm(){
			if(this.disabled) return;
			// console.log(JSON.stringify(this.formObj))
			let url;
			if(this.tabIndex == 1){
				url = '/api/member/forgetPaaswordByMobile'
			}else if(this.tabIndex == 2){
				url = '/api/member/forgetPaaswordByEmail'
			}
			uni.showLoading({
				title: 'Loading...',
				mask: true
			})
			this.$api.sendRequest({
				url: url,
				data: this.formObj,
				method: 'post',
				success: res=>{
					uni.hideLoading()
					if(res.code == 0){
						this.$util.showToast({title: this.$lang('reset.submittedSuccessfully')})
						setTimeout(()=>{
							this.toLogin();
						},1500)
					}else {
						this.getCaptcha();
						this.$util.showToast({title: res.message})
					}
				}
			})
		},
		toLogin() {
			if (this.back)
				this.$util.redirectTo('/pages/login/login/login', {
					back: this.back
				});
			else this.$util.redirectTo('/pages/login/login/login');
		},
	}
};
</script>


<style>
	page {
		background: #fff;
	}
</style>

<style scoped lang="scss">
	.header-reg {
		width: 100%;
		padding-top: 50rpx;
		.reg-tab {
			width: 86%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			.tab {
				font-size: 30rpx;
				color: #909399;
				margin-right: 40rpx;
			}
			.tab-act {
				color: #31bb6d;
				font-weight: 500;
			}
		}
	}
	
	.content-reset {
		.form-wrap {
			width: 86%;
			margin: 0 auto;
		
			.input-wrap {
				position: relative;
				width: 100%;
				box-sizing: border-box;
				height: 60rpx;
				margin-top: 60rpx;
		
				.iconfont {
					width: 60rpx;
					height: 60rpx;
					position: absolute;
					left: 0;
					right: 0;
					line-height: 60rpx;
					font-size: $font-size-toolbar;
					color: $color-title;
					font-weight: 600;
				}
		
				.content {
					display: flex;
					height: 60rpx;
					border-bottom: 1px solid $color-line;
					align-items: center;
		
					.input {
						flex: 1;
						height: 60rpx;
						line-height: 60rpx;
						font-size: $font-size-base;
					}
		
					.input-placeholder {
						font-size: $font-size-base;
						color: #bfbfbf;
						line-height: 60rpx;
					}
		
					.captcha {
						margin: 4rpx;
						height: 52rpx;
						width: 140rpx;
					}
		
					.dynacode {
						line-height: 60rpx;
						font-size: $font-size-tag;
					}
		
					.area-code {
						line-height: 60rpx;
						margin-right: 20rpx;
						font-size: $font-size-base;
					}
				}
			}
			
			.reset-btn {
				margin-top: 80rpx;
				width: 100%;
				height: 88rpx;
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
				background: #31bb6d;
			}
			.btn-dis {
				background: #CCD0D8;
			}
		}
	}
	
	
</style>
